<template>
  <div id="map">
    <div class="fixd">
      <div class="title">项目地图</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import AMapLoader from '@amap/amap-jsapi-loader';
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '45a32911c741174a39eab3e15fb77abb'
};
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      map: null,
      mouseTool: null,
      overlays: [],
      auto: null,
      placeSearch: null
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initMap() {
      AMapLoader.load({
        key: '67abce0f13668d282a7d14ec55d0d592',
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 初始化地图
          this.map = new AMap.Map('map', {
            viewMode: '2D', //  是否为3D地图模式
            zoom: 13, // 初始化地图级别
            center: [120.582112, 29.997117],
            resizeEnable: true
          });
          let _this = this;
          AMap.plugins('AMap.DistrictSearch', function () {
            var district = new AMap.DistrictSearch({
              // 返回行政区边界坐标等具体信息
              extensions: 'all',
              // 设置查询行政区级别为 区
              level: 'district'
            });
            district.search('建德市', function (status, result) {
              // 获取朝阳区的边界信息
              var bounds = result.districtList[0].boundaries[0];
              new AMap.Polygon({
                map: _this.map,
                strokeWeight: 1,
                path: bounds,
                // path:obj,
                fillOpacity: 0.5,
                fillColor: '#CCF3FF',
                strokeColor: '#3396fb',
                strokeStyle: 'dashed'
              });
              _this.map.setFitView();
            });
          });
        })
        .catch((e) => {
          console.log(e);
        });
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() {}, //生命周期 - 挂载之前
  mounted() {
    this.initMap();
  }, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
#map {
  overflow: hidden;
  width: 1300px;
  height: 350px;
  margin: 0 auto;
  margin-top: 20px;
  font-family: '微软雅黑';
  position: relative;
  .fixd {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: url('@/assets/images/bg.png') no-repeat center;
    background-size: cover;
    z-index: 99;
    .title {
      font-size: 20px;
      font-weight: bold;
      color: #fffb0f;
      line-height: 60px;
      margin-left: 120px;
    }
  }
  .amap-logo {
    display: none;
    opacity: 0 !important;
  }
  .amap-copyright {
    opacity: 0;
  }
}

/* 隐藏高德版权  */
</style>
